<template>
    <div class="detail-container">
        <div class="fix-header">
            <div class="backPage" @click="backPage">
                <image class="arrow_left" :src="imgPath('back.png')"></image>
                <text class="back col_fff medium">返回</text>
            </div>
            <div class="search">
                <input type="text" class="fix-search" placeholder="请输入搜索内容" v-model="morenVal" v-if="!previewText"  @return="doSearch" return-key-type="search">
                <input type="text" class="fix-search" placeholder="" v-model="morenVal" v-if="previewText"  @return="doSearch" return-key-type="search">
                <div class="keywordShow" v-if="previewText"  @click="closePreview">
                    <text class="shangbiao">{{previewText}}</text>
                    <text class="shangbiao">X</text>
                </div>
                <div class="fix-img">
                    <image :src="imgPath('search.png')" class="img"></image>
                </div>
            </div>
            <image class="shoppingCar" :src="imgPath('shopping.png')" @click="pushToCar"></image>
        </div>
        <div class="choose">
            <div class="choose-item" @click="zhineng">
                <text class="choose-text" :class="[ znText ? 'yellow':'choose-text' ]">{{zhinengText}}</text>
                <image :src="imgPath( Url1 ? 'gray.png': 'big.png' )" class="arrow-bigimg"></image>
            </div>
            <div class="choose-item price-item" @click="priceOrder">
                <text class="choose-text" :class="[ yellowText ? 'yellow':'choose-text' ]">价格</text>
                <div class="all-img">
                    <image :src="imgPath(value1 ? 'gray_up.png': 'yellow_up.png' )" class="arrow-img"></image>
                    <image :src="imgPath(value2? 'gray_down.png': 'yellow_down.png')" class="arrow-img"></image>
                </div>
            </div>
            <div class="choose-item" @click="showShop">
                <text class="choose-text" :class="[ storeText ? 'yellow':'choose-text' ]">店铺</text>
            </div>

            <div class="choose-item" @click="openOverlay">
                <text class="choose-text" :class="[ sxText ? 'yellow':'choose-text' ]">筛选</text>
                <image :src="imgPath( Url ? 'shaixuan.png': 'shaixuan_yellow.png' )" class="shaixuan-img"></image>
            </div>
        </div>
        <div class="imgContent">
        <scroller @loadmore="loadMoreInfo" v-if="showChoose" loadmoreoffset="50">
            <!--商品筛选-->
            <div class="img-wrap" v-if="!itemList && showChoose" >
                <div class="img-list" v-for="(item, index) in goodList" :key="index" @click="pushStoreDetail(item, index)">
                    <image :src="item.topPicture" class="list-pic"></image>
                    <text class="introduce">{{item.goodsName}}</text>
                    <div class="goods-price">
                        <text class="nowPrice">￥{{item.discountPrice ? item.discountPrice : item.price}}/{{item.priceUnit}}</text>
                        <!--<text class="oldPrice" v-if="item.discountPrice">原价￥{{item.price}}/{{item.priceUnit}}</text>-->
                    </div>
                </div>
            </div>
            <!--商品筛选-->
            <div class="img-wrap" v-if="itemList && showChoose" >
                <div class="img-list" v-for="(item, index) in goodList" :key="index" @click="pushStoreDetail(item, index)">
                    <image :src="item.topPicture" class="list-pic"></image>
                    <text class="introduce">{{item.goodsName}}</text>
                    <text class="price" v-if="(itemList.parentId !== 7)|| (item.type === '24' && itemList.parentId === 7)">￥{{item.discountPrice ? item.discountPrice : item.price}}/{{item.priceUnit}}</text>
                    <div class="address" v-if="(item.type !== '24' && itemList.parentId === 7)">
                        <image :src="imgPath('location.png')" class="addimg"></image>
                        <text class="price price1">{{item.address}}</text>
                    </div>
                </div>
            </div>
        </scroller>
        </div>
        <!--店铺筛选-->
            <list class="shop-wrap" v-if="showhiddenShop" @loadmore="loadMoroContent">
                <cell v-for="(item, index) in shopList" :key="index">
                    <div class="shop-item">
                        <div class="shop-header">
                            <div class="store-imgwrap">
                                <img :src="item.headPicture" class="store-img">
                            </div>
                            <div class="shop-detail">
                                <text class="store-name">{{item.name}}</text>
                                <div class="person">
                                    <div class="see">
                                        <image :src="imgPath('follow.png')" class="seeImg"></image>
                                        <text class="seeText" v-if="item.concernNumber">{{item.concernNumber}}</text>
                                        <text class="seeText" v-if="!item.concernNumber">0</text>
                                    </div>
                                    <div class="see look">
                                        <image :src="imgPath('Swimsuit.png')" class="seeImg"></image>
                                        <text class="seeText" v-if="item.goodsNumber">{{item.goodsNumber}}</text>
                                        <text class="seeText" v-if="!item.goodsNumber">0</text>
                                    </div>
                                </div>
                            </div>
                            <text class="come-shop" @click="pushToStoreInfo(item, index)">进店</text>
                        </div>
                        <div class="shop-bottom">
                            <div class="display" v-for="(item1, index) in item.goodsList" :key="index">
                                <image :src="item1.topPicture" class="displayImg"></image>
                                <text class="displayText">￥{{item.discountPrice ? item.discountPrice : item.price}}/{{item.priceUnit}}</text>
                            </div>
                        </div>
                    </div>
                </cell>
            </list>
        <!--筛选部分-->
        <!--<div class="modal" v-if="showModal">-->
        <!--<div class="modal-content">-->
        <!--<div class="modal-header">-->
        <!--<div class="close">-->
        <!--<img :src="imgPath('close.png')" class="closeImg" @click="closeModal">-->
        <!--</div>-->
        <!--<text class="shaixuan">筛选</text>-->
        <!--</div>-->
        <!--<div class="Wrap">-->
        <!--<scroller>-->
        <!--<div class="all" @click="showAll" >-->
        <!--<text class="allText" >全部</text>-->
        <!--<image  class="arrow" :src="imgPath( Urlpath ? 'arrow_bottom.png': 'arrow_top.png' )"></image>-->
        <!--</div>-->
        <!--<wxc-grid-select v-if="alltrue" class="gridSelect"-->
        <!--:list="testData2" :cols="3"  :single="true">-->
        <!--</wxc-grid-select>-->
        <!--<div class="all all-gradient" @click ="showAllGradient">-->
        <!--<text class="allText" >全部布料</text>-->
        <!--<image  class="arrow" :src="imgPath( Urlpath1 ? 'arrow_bottom.png': 'arrow_top.png' )"></image>-->
        <!--</div>-->
        <!--<div class="gradient" v-if="allGradient">-->
        <!--<div class="type">-->
        <!--<text class="typename">里布</text>-->
        <!--<wxc-grid-select  class="gridSelect"-->
        <!--:list="testData3" :cols="3"  :single="true">-->
        <!--</wxc-grid-select>-->
        <!--</div>-->
        <!--<div class="type">-->
        <!--<text class="typename">印花</text>-->
        <!--<wxc-grid-select  class="gridSelect"-->
        <!--:list="testData3" :cols="3"  :single="true">-->
        <!--</wxc-grid-select>-->
        <!--</div>-->
        <!--<div class="type">-->
        <!--<text class="typename">提花</text>-->
        <!--<wxc-grid-select  class="gridSelect"-->
        <!--:list="testData3" :cols="3"  :single="true">-->
        <!--</wxc-grid-select>-->
        <!--</div>-->
        <!--</div>-->
        <!--</scroller>-->
        <!--</div>-->
        <!--<div class="modal-bottom">-->
        <!--<text class="reset">重置</text>-->
        <!--<text class="confirm">确认</text>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--智能筛选-->
        <div class="zhineng" v-if="zhinengShow">
            <div class="znCon">
                <div class="demo" v-for="(item, index) in listData.data" :key="index" @click="choosePayType(item, index)" >
                    <text class="beforeColor" :class="[indx == item.value ? 'afterColor':'beforeColor']">{{item.description}}</text>
                    <image :src="imgPath('checked.png')" class="gouImg" v-if="indx ==item.value"></image>
                </div>
            </div>
        </div>
        <!--价格筛选-->
        <div class="zhineng" v-if="priceShow">
            <div class="znCon">
                <div class="demo" v-for="(item, index) in priceList.data" :key="index" @click="choosePriceType(item, index)" >
                    <text class="beforeColor" :class="[indx == item.value ? 'afterColor':'beforeColor']">{{item.description}}</text>
                    <image :src="imgPath('checked.png')" class="gouImg" v-if="indx ==item.value"></image>
                </div>
            </div>
        </div>
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import ImageUpload from '../../components/imageUpload'
import {storeShopList, goodsSort, shopGoodsList, priceSort} from '@/api/store'
import WxcGridSelect from '@/components/grid-select'
import {WxcRadio, WxcLoading} from 'weex-ui'
const modal = weex.requireModule('modal')
export default {
  name: 'storeDetail',
  components: {ImageUpload, WxcGridSelect, WxcRadio, WxcLoading},
  data () {
    return {
      hasMore: true, // 是否还有数据
      hasMoreShop: true, // 是否还有店铺信息
      shopList: [],
      needMask: true, // 显示蒙版
      loadingShow: true, // loading
      priceShow: false,
      lineSpacing: '24px',
      yellowText: false, // 点击筛选文字变黄色
      znText: false, // 只能筛选颜色控制
      storeText: false, // 点击店铺筛选颜色控制
      sxText: false, // 点击筛选颜色控制
      Url: true, // 筛选图片的切换
      Url1: true, // 智能图片的切换
      showChoose: true,
      showhiddenShop: false,
      showModal: false,
      alltrue: false,
      allGradient: false,
      zhinengShow: false,
      zhinengText: '智能',
      morenVal: '',
      customStyles: {
        color: '#333333',
        checkedColor: '#ffffff',
        disabledColor: '#eeeeee',
        borderColor: '#666666',
        checkedBorderColor: '#ffb200',
        backgroundColor: '#ffffff',
        checkedBackgroundColor: '#ffb200'
      },
      Urlpath: true,
      Urlpath1: true,
      pageNo: 1,
      value1: true,
      value2: true,
      goodindx: '',
      priceindx: '',
      previewText: '', // 预览
      parentId: '',
      pagesize: 6,
      testData2: [
        {
          'description': '全部商品'
        },
        {
          'description': '推荐专区'
        },
        {
          'description': '活动专区'
        },
        {
          'description': '布料',
          checked: true
        },
        {
          'description': '辅料'
        },
        {
          'description': '胸杯'
        },
        {
          'description': '扣类'
        },
        {
          'description': '包装材料'
        },
        {
          'description': '其他'
        }
      ],
      testData3: [
        {
          'description': '全部素色'
        },
        {
          'description': '尼龙氨纶'
        },
        {
          'description': '涤纶氨纶'
        },
        {
          'description': '其他',
          checked: true
        }
      ],
      listData: {},
      goodList: [],
      priceList: [],
      diffrient: '',
      itemList: {}, // 包装材料下面内容
      priceOrAddress: ''
    }
  },
  methods: {
    showShop () {
      const that = this
      that.showChoose = false
      that.showhiddenShop = true
      that.znText = false
      that.yellowText = false
      that.storeText = true
      that.value1 = true
      that.value2 = true
      that.sxText = false
      that.Url = true
      that.Url1 = true
      that.hasMoreShop = true
      that.pageNo = 1
      that.shopList = []
      that.getShowDataList()
    },
    getShowDataList () {
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pagesize,
        keyword: that.morenVal
      }
      that.loadingShow = true
      that.$api.get(storeShopList, params, function (res) {
        that.loadingShow = false
        let storelist = res.data.records
        if (storelist.length <= 0) {
          that.hasMoreShop = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.shopList = that.shopList.concat(storelist)
      }, function () {
        that.loadingShow = false
      })
    },
    openOverlay () {
      const that = this
      that.showModal = true
      that.value1 = true
      that.value2 = true
      that.storeText = false
      that.yellowText = false
      that.znText = false
      that.sxText = true
      that.Url = false
      that.Url1 = true
    },
    closeModal () {
      this.showModal = false
    },
    // 展开全部
    showAll () {
      this.alltrue = !this.alltrue
      this.Urlpath = !this.Urlpath
    },
    // 展开全部材料
    showAllGradient () {
      this.Urlpath1 = !this.Urlpath1
      this.allGradient = !this.allGradient
    },
    backPage () { // 返回
      this.$router.go(-1)
    },
    zhineng () {
      const that = this
      that.zhinengShow = true
      that.znText = true
      that.storeText = false
      that.sxText = false
      that.Url = true
      that.Url1 = false
    },
    // 选择排列方式 智能筛选
    choosePayType (item, index) {
      const that = this
      that.showModal = false
      that.showhiddenShop = false
      that.showChoose = true
      that.zhinengText = item.description
      that.goodindx = item.value
      that.priceindx = ''
      that.pageNo = 1
      that.goodList = []
      that.hasMore = true
      that.getDataList()
      that.zhinengShow = false
    },
    priceOrder () {
      const that = this
      that.priceShow = true
      that.yellowText = true
      that.storeText = false
      that.sxText = false
      that.Url = true
    },
    choosePriceType (item, index) {
      const that = this
      that.showModal = false
      that.showhiddenShop = false
      that.showChoose = true
      that.priceindx = item.value
      that.goodindx = ''
      that.pageNo = 1
      that.hasMore = true
      that.goodList = []
      that.getDataList()
      that.priceShow = false
      if (item.value === '1') {
        that.value1 = false
        that.value2 = true
      }
      if (item.value === '2') {
        that.value1 = true
        that.value2 = false
      }
    },
    // 进入店铺首页
    pushToStoreInfo (item, index) {
      this.$router.push({path: 'storeInfo', query: {shopsId: item.id}})
    },
    // 跳转到商品列表
    pushStoreDetail (item, index) {
      const that = this
      that.$router.push({path: '/store/storeDetail', query: {goodsId: item.id}})
    },
    // 跳到购物车
    pushToCar () {
      const that = this
      that.$router.push('/store/shoppingCar')
    },
    closePreview () {
      const that = this
      that.previewText = ''
    },
    getDataList () { // 获取数据列表
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pagesize,
        priceSort: that.priceindx,
        type: that.parentId,
        goodsSort: that.goodindx,
        keyword: that.morenVal
      }
      that.loadingShow = true
      // 默认为智能排序
      that.$api.get(shopGoodsList, params, function (res) {
        that.loadingShow = false
        let list = res.data.records
        if (list.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.goodList = that.goodList.concat(list)
      }, function () {
        that.loadingShow = false
      })
    },
    // 搜索
    search () {
      const that = this
      that.getDataList()
    },
    loadMoroContent () {
      const that = this
      if (!that.hasMoreShop) {
        return
      }
      that.pageNo++
      that.getShowDataList()
    },
    loadMoreInfo () { // 加载更多
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getDataList()
    }
  },
  mounted () {
    const that = this
    that.morenVal = that.$route.query.searchText
    that.parentId = that.$route.query.type // 商标 25
    that.itemList = that.$route.query.item
    that.previewText = that.$route.query.value
    that.getDataList()
    // 获取价格排列列表
    that.$api.get(priceSort, {}, function (res) {
      that.priceList = res
    })
    // 获取商品排序列表
    that.$api.get(goodsSort, {}, function (res) {
      that.listData = res
    })
  }
}
</script>
<style>

</style>
<style scoped>
    .fix-header {
        height: 88px;
        /*padding-top: 14px;*/
        /*padding-bottom: 14px;*/
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
        align-items: center;
        position: fixed;
        display: flex;
        flex-direction: row;
        left: 0;
        right: 0;
    }

    .backPage {
        flex-direction: row;
        align-items: center;
        height: 88px;
        padding-right: 32px;
        padding-left: 24px;
    }

    .arrow_left {
        width: 24px;
        height: 40px;
        margin-right: 16px;
    }

    .back {
        font-size: 34px;
        line-height: 88px;
        color: #fff;
    }

    .search {
        align-items: center;
        display: flex;
        flex-direction: row;
        width: 485px;
        height: 60px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #fff;
        /*background-color: blue;*/
    }

    .fix-img {
        width: 62px;
        height: 60px;
        align-items: center;
        background-color: #fff;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .img {
        width: 28px;
        height: 28px;
        margin-top: 15px;
    }

    .fix-search {
        height: 60px;
        width: 415px;
        padding-left: 16px;
        border: none;
        /*background-color: red;*/
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        font-size: 24px;
        color: #333;
        overflow: hidden;
        background-color: #fff;
    }

    .choose {
        height: 70px;
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        left: 0;
        top: 90px;
        right: 0;
    }

    .choose-item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .choose-text {
        font-size: 28px;
        color: rgb(70, 70, 70);
        margin-right: 12px;
    }

    .arrow-img {
        width: 26px;
        height: 13px;
        margin-top: 5px;
    }

    .shaixuan-img {
        width: 24px;
        height: 24px;
    }

    .all-img {
        display: flex;
        flex-direction: column;
    }

    .introduce {
        font-size: 26px;
        /*width: 240px;*/
        text-overflow: ellipsis;
        /*overflow: hidden;*/
        padding-left: 24px;
        padding-right: 24px;
        margin-top: 24px;
        color: rgb(70, 70, 70);
        lines: 1;
    }

    .goods-price {
        margin-top: 28px;
        padding-left: 24px;
        padding-right: 24px;
        flex-direction: row;
        align-items: center;
    }
    .nowPrice {
        font-size: 28px;
        color: rgb(254, 203, 1);
    }
    .oldPrice {
        margin-left: 16px;
        font-size: 24px;
        color: #666;
        text-decoration: line-through;
    }
    .price {
        font-size: 28px;
        color: rgb(254, 203, 1);
        /*margin-top: 14px;*/
        margin-top: 28px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .img-wrap {
        padding-top: 8px;
        padding-bottom: 30px;
        padding-left: 24px;
        padding-right: 24px;
        /*background-color: red;*/
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .img-list {
        width: 343px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        margin-bottom: 16px;
        padding-bottom: 29px;
        box-shadow: 0px 0px 10px 3px rgba(43, 48, 64, 0.12);
        background-color: #fff;
        /*float: left;*/
    }

    .list-pic {
        width: 343px;
        height: 343px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }

    .shop-wrap {
        background-color: rgb(245, 245, 245);
        flex-wrap: wrap;
        flex-direction: column;
    }

    .shop-item {
        margin-top: 16px;
        background-color: #fff;
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 21px;
        padding-bottom: 49px;
        flex: 1;
    }

    .shop-header {
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 25px;
    }

    .store-imgwrap {
        border-width: 1px;
        border-style: solid;
        border-color: rgb(245, 245, 245);
        height: 88px;
        width: 180px;
    }

    .store-img {
        width: 180px;
        height: 88px;
    }

    .shop-detail {
        width: 310px;
        flex-direction: column;
        margin-left: 24px;
    }

    .store-name {
        font-size: 30px;
        color: rgb(134, 134, 134);
        lines: 1;
        text-overflow: ellipsis;
    }

    .person {
        margin-top: 15px;
        flex-direction: row;
        justify-content: space-between;
    }

    .see {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .seeImg {
        width: 42px;
        height: 42px;
        margin-right: 14px;
    }

    .seeText {
        font-size: 24px;
        color: rgb(134, 134, 134);
    }

    .look {
        margin-left: 70px;
    }

    .come-shop {
        border-width: 1px;
        border-style: solid;
        border-color: rgb(254, 203, 1);
        color: rgb(254, 208, 27);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        width: 98px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        font-size: 26px;
        background-color: rgb(245, 245, 245);
        /*margin-left:93px*/
    }

    .shop-bottom {
        border-top-color: rgb(235, 235, 235);
        border-top-style: solid;
        border-top-width: 1px;
        padding-top: 19px;
        flex-direction: row;
        /*justify-content: space-between;*/

    }

    .displayImg {
        width: 226px;
        height: 226px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .display {
        position: relative;
        width: 226px;
        height: 226px;
        /*background-color: red;*/
        margin-right: 10px;
    }

    .displayText {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 110px;
        height: 36px;
        background-color: rgba(43, 48, 64, 0.7);
        font-size: 24px;
        color: rgb(255, 255, 255);
        line-height: 36px;
        text-align: center;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .modal {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(43, 48, 64, 0.12);
    }

    .modal-content {
        width: 550px;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(245, 245, 245);
        position: fixed;
    }

    .modal-header {
        height: 90px;
        flex-direction: row;
        align-items: center;
        background-color: #fff;
        padding-left: 24px;
        padding-right: 24px;
    }

    .close {
        width: 31px;
        height: 31px;
        background-color: rgba(43, 48, 64, 0.3);
        border-radius: 50%;
    }

    .closeImg {
        width: 31px;
        height: 31px;
    }

    .shaixuan {
        margin-left: 223px;
        font-size: 32px;
        color: rgb(70, 70, 70);
    }

    .all {
        height: 68px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgb(235, 235, 235);
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(235, 235, 235);
        background-color: #fff;
        padding-left: 24px;
        padding-right: 24px;
    }

    .allText {
        font-weight: bold;
        font-size: 28px;
    }

    .arrow {
        width: 28px;
        height: 28px;

    }

    .gridSelect {
        padding-top: 14px;
        padding-bottom: 24px;
        background-color: #fff;
        padding-left: 24px;
        padding-right: 24px;
    }

    .all-gradient {
        margin-top: 16px;
    }

    .type {
        flex-direction: column;
        padding-top: 24px;
        background-color: #fff;

    }

    .typename {
        font-size: 24px;
        color: rgb(206, 206, 206);
        padding-left: 24px;
        padding-right: 24px;
    }

    .modal-bottom {
        height: 98px;
        position: fixed;
        bottom: 0;
        border-top-color: rgb(245, 245, 245);
        border-top-style: solid;
        border-top-width: 1px;
        flex-direction: row;
        flex: 1;
        right: 0;
    }

    .reset {
        width: 275px;
        height: 98px;
        background-color: #fff;
        font-size: 30px;
        color: rgb(134, 134, 134);
        line-height: 98px;
        text-align: center;
    }

    .confirm {
        width: 275px;
        height: 98px;
        background-color: rgb(162, 162, 162);
        font-size: 30px;
        line-height: 98px;
        text-align: center;
        color: rgb(255, 255, 255)
    }

    .zhineng {
        position: absolute;
        right: 0;
        top: 160px;
        left: 0;
        bottom: 0;
        background-color: rgb(43, 48, 64);
    }

    .znCon {
        position: fixed;
        top: 160px;
        width: 750px;
    }

    .demo {
        width: 750px;
        height: 88px;
        background-color: rgb(255, 255, 255);
        padding-left: 24px;
        padding-right: 24px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-top-style: solid;
        border-top-color: rgb(245, 245, 245);
        border-top-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(245, 245, 245);
        border-bottom-width: 1px;
    }

    .gouImg {
        width: 31px;
        height: 31px;
    }

    .beforeColor {
        color: rgb(134, 134, 134);
        font-size: 28px;
    }

    .afterColor {
        color: rgb(254, 203, 1);
        font-size: 28px;
    }

    .yellow {
        color: rgb(254, 203, 1);
        font-weight: bold
    }

    .arrow-bigimg {
        width: 26px;
        height: 26px;
    }

    .Wrap {
        position: fixed;
        top: 100px;
        right: 0;
        bottom: 100px;
        width: 550px;
    }

    .shoppingCar {
        width: 40px;
        height: 40px;
        margin-left: 40px;
    }

    .address {
        flex-direction: row;
        align-items: center;
        padding-left: 24px;
        padding-right: 24px;
        height: 40px;
        margin-top: 8px;
        background-color: #fff;
    }

    .addimg {
        width: 22px;
        height: 22px;
    }
    .price1{
        margin-top: 0;
    }
    .detail-container {
        background-color: rgb(235, 235, 235);
    }
   .keywordShow{
       padding-left: 10px;
       padding-right: 10px;
       height: 40px;
       line-height: 40px;
       position: absolute;
       left: 16px;
       flex-direction: row;
       align-items: center;
       background-color: rgba(43,48,64,0.6);
       border-radius: 8px;
       top: 10px;
   }
    .shangbiao{
        font-size: 26px;
        color:#fff;
    }
    .imgContent{
        position: fixed;
        top:165px;
        left: 0;
        right: 0;
        bottom: 0;
    }

</style>
<style>
    /*.weex-list-inner{*/
        /*width:700px;*/
        /*flex-direction: row;*/
        /*justify-content: space-between;*/
        /*flex-wrap: wrap*/

    /*}*/
</style>
